<template>
  <div class="roast-list">
    <div class="iframe-container">
      <iframe 
        :src="iframeSrc" 
        width="100%" 
        :height="iframeHeight"
        frameborder="0">
      </iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoastList',
  props: {
    companyId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      iframeHeight: window.innerHeight - 100 // 初始高度设置
    }
  },
  //2吐槽   5公司tag id
  //  http://192.168.3.86:8100/?filter[tags]=2,5
  computed: {
    iframeSrc() {
      // 从URL参数中获取 flarum_tag_id
      const urlParams = new URLSearchParams(window.location.search);
      const flarumTagId = urlParams.get('flarum_tag_id');
      
      // 如果有 companyId 和 flarum_tag_id，则构建带参数的URL
      if (this.companyId && flarumTagId) {
        return `http://192.168.3.86:8100/?filter[tags]=2,${flarumTagId}`;
      }
      
      // 默认URL
      return 'http://192.168.3.86:8100/t/Rant';
    }
  },
  mounted() {
    // 组件挂载后设置iframe高度
    this.updateIframeHeight();
    
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.updateIframeHeight);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听器
    window.removeEventListener('resize', this.updateIframeHeight);
  },
  methods: {
    updateIframeHeight() {
      // 设置iframe高度为视口高度减去一些偏移量
      this.iframeHeight = window.innerHeight - 50; // 根据需要调整这个值
    }
  },
}
</script>

<style scoped>

.roast-list {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.iframe-container {
  width: 100%;
  max-width: 1200px;
  height: calc(100vh - 50px);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  margin-top: -48px;
}

.roast-list iframe {
  width: 100%;
  height: 88vh;
}
</style>